<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html401/loose.dtd">

<html>
<head>

  <title>irt.org open social shindig demo</title>
  <link rel=stylesheet href="http://www.irt.org/utility/main.css" type="text/css">

  <script src="Scripts/container/json.js" type="text/javascript"></script>
  <script src="Scripts/container/ifpc.js" type="text/javascript"></script>
  <script src="Scripts/container/cookies.js" type="text/javascript"></script>
  <script src="Scripts/container/gadgets.js" type="text/javascript"></script>

  <!-- head - not needed for example - start -->

  <meta name="Keywords" lang="en" content="irt.org open social shindig demo">
  <meta name="Description" lang="en" content="irt.org open social shindig demo">
  <style type="text/css"><!--
  h1, h2, h3, h4, h5, h6, em { color: maroon; }
  .highlight, .hl100, .highlightsmall, .bluebackground { background: #aaaaff; }
  .itemTitle, .itemSynopsis, table.code { background: #ffffcc; }
  //--></style>
  <meta name="Author" lang="en" content="Martin Webb">
  <meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www.rsac.org/ratingsv01.html" l gen true comment "RSACi North America Server" for "http://www.irt.org/" on "1998.08.13T14:43-0800" r (n 0 s 0 v 0 l 0))'>
  <meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www.classify.org/safesurf/" l gen true for "http://www.irt.org/" by "martin@irt.org" r (SS~~000 1))'>

  <!-- head - not needed for example - end -->

  <!-- default container look and feel -->
  <link rel="stylesheet" href="gadgets.css">

  <style>
  /*margin and padding on body element
    can introduce errors in determining
    element position and are not recommended;
    we turn them off as a foundation for YUI
    CSS treatments. */
  body {
    margin: 0;
    padding: 0;
  }
  .body { margin: 5px 5px 5px 5px; }
  </style>

<!--<script type="text/javascript" src="/iGoogle/Scripts/container/json.js"></script>
<script type="text/javascript" src="http://www.google.com/ig/ifpc.js"></script>
<script type="text/javascript" src="/iGoogle/Scripts/container/cookies.js"></script>-->

  <script type="text/javascript">
  var my = {};

  // the following allows gadget: specUrl, height, width and title
  // width of 99% is used due to IE div/iframe overlap issues - not fully resolved - height has an issue
  // would be best to hide the hacks

  my.gadgetSpecUrls = [
    ['http://www.google.com/ig/modules/horoscope.xml',200,'99%','Horoscope'],
    ['http://www.labpixies.com/campaigns/todo/todo.xml',255,'99%','Notes'],
    ['http://googatrix.googlepages.com/HotmailGadget.xml',400,'99%','eMail'],
    ['http://gadgets.weather.com/services/gadgets/googlegadget/gadget.xml',400,'99%','Weather'],
    ['http://www.livebug.com/gadget/webmsn.xml',300,'99%','MSN Messenger'],
    ['http://antonshevchuk.googlepages.com/photogallery.xml',300,'99%','Photo Gallery'],
    ['http://www.twizi.com/expedia.xml',200,'99%','Travel Planner'],
    ['http://hosting.gmodules.com/ig/gadgets/file/111357399372471521016/coolcalendar.xml',200,'99%','Event Calandar'],
    ['http://www.irt.org/carousel/igoogle.xml',360,'99%','irt.org Carousel'],
//    ['http://www.irt.org/games/js/match/igoogle.xml',360,'99%','irt.org Icon Match'],
    ['http://www.irt.org/games/js/sol/igoogle.xml',360,'99%','irt.org Solitaire'],
    ['http://www.irt.org/games/js/mind/igoogle9.xml',600,'99%','irt.org Mastermind'],
    ['http://bejeweledg.googlecode.com/svn/trunk/bejeweled.xml',220,'99%','Bejeweled'],
    ['http://customrss.googlepages.com/customrss.xml',200,'99%','News'],
    ['http://will.hughesfamily.net.au/modules/g2/g2imagemodule.xml',400,'99%','irt.org Gallery'],
    ['http://1o4.jp/google/module/slim-reader.xml',400,'99%','RSS Feed']
  ];

  // TODO - demo pre-populate preferences - e.g. set the slim-reader.xml gadget to use the feed:
  // http://mail-archives.apache.org/mod_mbox/incubator-shindig-dev/?format=atom

  // TODO - fix http://www.irt.org/games/js/match/igoogle.xml

  var containerParentUrl = 'ifpc_relay.html';

  // This container lays out and renders gadgets itself.

  my.LayoutManager = function() {
    gadgets.LayoutManager.call(this);
  };

  my.LayoutManager.inherits(gadgets.LayoutManager);

  my.LayoutManager.prototype.getGadgetChrome = function(gadget) {
    var chromeId = 'gadget-chrome-' + gadget.id;
    return chromeId ? document.getElementById(chromeId) : null;
  };

  my.init = function() {
    gadgets.container.setParentUrl(containerParentUrl);
    gadgets.container.layoutManager = new my.LayoutManager();
  };

  my.renderGadgets = function() {
    for (var i = 0; i < my.gadgetSpecUrls.length; ++i) {
      var gadget = gadgets.container.createGadget(
        {
          specUrl: my.gadgetSpecUrls[i][0],
          height: my.gadgetSpecUrls[i][1],
          width: my.gadgetSpecUrls[i][2],
          title: my.gadgetSpecUrls[i][3]
        }
      );
      gadgets.container.addGadget(gadget);
      gadgets.container.renderGadget(gadget);
    }
  };
  </script>

  <script type="text/javascript" src="http://developer.yahoo.com/yui/build/utilities/utilities.js?_yuiversion=2.4.1"></script>

</head>
<body onLoad="my.init();my.renderGadgets()">

  <!-- create a fake body to re-introoduce a margin -->
  <div class="body">

  <!-- header - not needed for example - start -->

  <table><tr><td width="120" valign="top">
  <a href="http://www.irt.org/"><img src="http://www.irt.org/images/irt-new-sm.png" alt="irt.org logo" border="0" width="120" height="45"></a>
  </td><td width="100%" valign="top">
  <p align="center">
  <script type="text/javascript">google_ad_client = "pub-2749921657072724";google_ad_width = 468;google_ad_height = 60;google_ad_format = "468x60_as";google_ad_type = "image";google_ad_channel = "";google_color_border = "ffffff";google_color_bg = "FFFFFF";google_color_link = "0000FF";google_color_text = "000000";google_color_url = "008000";google_ui_features = "rc:0";</script>
  <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
  </p>
  </td></tr></table>

  <!-- header - not needed for example - end -->

  <div id="container">
    <div id="container-column-0" class="container-column">
      <!-- dummy is used to allow drag and drop to drop onto an empty column -->
      <!-- there must be a better way to do this -->
      <div id="dummy-0" class="gadgets-gadget-chrome"></div>
      <div id="gadget-chrome-0" class="gadgets-gadget-chrome"></div>
      <div id="gadget-chrome-1" class="gadgets-gadget-chrome"></div>
      <div id="gadget-chrome-2" class="gadgets-gadget-chrome"></div>
      <div id="gadget-chrome-3" class="gadgets-gadget-chrome"></div>
      <div id="gadget-chrome-4" class="gadgets-gadget-chrome"></div>
    </div>
    <div id="container-vertical-divider-1" class="container-vertical-divider"></div>
    <div id="container-column-1" class="container-column">
      <div id="dummy-1" class="gadgets-gadget-chrome"></div>
      <div id="gadget-chrome-5" class="gadgets-gadget-chrome"></div>
      <div id="gadget-chrome-6" class="gadgets-gadget-chrome"></div>
      <div id="gadget-chrome-7" class="gadgets-gadget-chrome"></div>
      <div id="gadget-chrome-8" class="gadgets-gadget-chrome"></div>
      <div id="gadget-chrome-9" class="gadgets-gadget-chrome"></div>
    </div>
    <div id="container-vertical-divider-1" class="container-vertical-divider"></div>
    <div id="container-column-2" class="container-column">
      <div id="dummy-2" class="gadgets-gadget-chrome"></div>
      <div id="gadget-chrome-10" class="gadgets-gadget-chrome"></div>
      <div id="gadget-chrome-11" class="gadgets-gadget-chrome"></div>
      <div id="gadget-chrome-12" class="gadgets-gadget-chrome"></div>
      <div id="gadget-chrome-13" class="gadgets-gadget-chrome"></div>
      <div id="gadget-chrome-14" class="gadgets-gadget-chrome"></div>
    </div>
  </div>

  <!-- add some drag and drop support - needs work - as is just drop based on the current mouse position (which igoogle does) -->
  <script type="text/javascript" src="dragndrop.js"></script>

  <!-- trailer - not needed for example - start -->

  <div class="center">
  <script type="text/javascript">google_ad_client = "pub-2749921657072724";google_ad_width = 728;google_ad_height = 90;google_ad_format = "728x90_as";google_ad_type = "image";google_ad_channel = "";google_color_border = "ffffff";google_color_bg = "FFFFFF";google_color_link = "0000FF";google_color_text = "000000";google_color_url = "008000";google_ui_features = "rc:0";</script>
  <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
  </div>

  <div class="center">
  <small>
  Last Updated: 7th January 2008. Maintained by: <a href="http://www.irt.org/profiles/martin.htm">Martin Webb</a>
  <br>
  irt.org <a href="http://www.irt.org/utility/smprint.htm#liability" target="_top">liability</a>, trademark,
  <a href="http://www.irt.org/utility/smprint.htm#copyright" target="_top">document use</a>,

  <a href="http://www.irt.org/utility/smprint.htm#privacy" target="_top">privacy statement</a> and
  <a href="http://www.irt.org/utility/smprint.htm#software" target="_top">software licensing rules</a> apply.
  </small>
  </div>

  <div class="center"><small>Copyright &copy; 1996-2008 irt.org, All Rights Reserved.</small></div>

  <!-- trailer - not needed for example - end -->

  </div>

</body>
</html>
